<template>
	<div class="exponentialFunction">
		<div>
			<span>公式</span>
			<img src="../../assets/math/ExponentialFunction.png" >
		</div>
		<div>
			<span>α的值为</span>
			<el-input v-model="aVal" @input="drawChart()" placeholder="请输入α的值" size="small"></el-input>
		</div>
		<div>
			<span>x的值为</span>
			<el-input v-model="xVal" @input="drawChart()" placeholder="请输入x的值" size="small"></el-input>
		</div>
		<div>
			<span>y的值为</span>
			<span>{{yVals}}</span>
			<!-- <el-input v-model="yVal" @input="drawChart()" placeholder="请输入y的值" size="small"></el-input> -->
		</div>
		<div ref="drawChart" id="drawChart"></div>
	</div>
</template>

<script>
	export default {
		name: "ExponentialFunction",
		data() {
			return {
				aVal: 0.5,
				xVal: 1,
				yVal: 0,
				echart: null,
			}
		},
		computed:{
			yVals(){
				this.yVal = this.yVal * Math.pow(10,18);//保留18位小数
				this.yVal = Math.round(this.yVal) / Math.pow(10,18);
				return this.yVal;
			},
		},
		methods: {
			func(x) {
				this.yVal = Math.pow(this.aVal, this.xVal)
				return Math.pow(this.aVal, x);
			},
			generateData() {
				let data = [];
				for (let i = -8; i <= 8; i += 0.1) {
					data.push([i, this.func(i)]);
				}
				return data;
			},
			drawChart() {
				if (this.echart != null && this.echart != "" && this.echart != undefined){
				    this.echart.dispose();
				}
				this.echart = this.$echarts.init(this.$refs.drawChart);
				
				let option = {
					animation: false,
					grid: {
						top: 40,
						left: 50,
						right: 40,
						bottom: 50
					},
					xAxis: {
						name: 'x',
						minorTick: {
							show: true
						},
						minorSplitLine: {
							show: true
						}
					},
					yAxis: {
						name: 'y',
						min: -100,
						max: 100,
						minorTick: {
							show: true
						},
						minorSplitLine: {
							show: true
						}
					},
					dataZoom: [{
							show: true,
							type: 'inside',
							filterMode: 'none',
							xAxisIndex: [0],
							startValue: -20,
							endValue: 20
						},
						{
							show: true,
							type: 'inside',
							filterMode: 'none',
							yAxisIndex: [0],
							startValue: -20,
							endValue: 20
						}
					],
					series: [{
						type: 'line',
						showSymbol: false,
						clip: true,
						data: this.generateData()
					}]
				};
				
				this.echart.setOption(option);
			}
		},
		mounted() {
			this.drawChart();
		}
	}
</script>

<style scoped>
	.exponentialFunction{
		width: 100%; 
	}
	.exponentialFunction div{
		display: table-row;
		height: 35px;
		/* line-height: 35px; */
	}
	.exponentialFunction div img{
		height: 35px;
		vertical-align:middle;
	}
	.exponentialFunction div .el-input{
		display: table-cell;
		height: 35px;
		width: 200px;
	}
	
	#drawChart{
		display: block;
		width: 100%; 
	}
	
	@media screen and (min-width: 1200px){
		.exponentialFunction div span{
			display: table-cell;
			width: 100px;
		}
		#drawChart{
			height: 600px;
		}
	}
	@media screen and (max-width: 1200px){
		.exponentialFunction div span{
			display: table-cell;
			width: 100px;
		}
		#drawChart{
			height: 600px;
		}
	}
	@media screen and (max-width: 767px){
		.exponentialFunction div span{
			display: table-cell;
			width: 65px;
		}
		#drawChart{
			height: 350px;
		}
	}
</style>
